@CHARSET "UTF-8";
/* 清除浏览器的默认样式 */
*{
    padding:0px;
    margin:0px auto;
}

/*整个网页的背景*/
body{
    width:100%;
    height:100%;
    background:url(../image/bg.jpg) no-repeat;
    background-size:100% 100%;
    background-attachment:fixed;
}

.head{
    width:100%;
    background:rgba(45,154,152,0.8);
    /* 固定布局 */
    position:fixed;
    /* 布局之后，都需要定义位置 */
    top:0px;
    /*更改文字相关的样式*/
    text-align:center;
    line-height:60px;
    color:#fff;
    font-size:22px;
    font-weight:bold;
}
.head .right{
    /* 绝对定位 */
    position:absolute;
    top:0px;
    right:150px;
}
/* 伪类，当鼠标一上去的时候，触发样式 */
.head .right:hover{
    text-decoration:underline;
    cursor:pointer;		/* 改变鼠标的手势 */
}

.content{
    width:40%;
    margin-left:200px;
    margin-bottom:100px;
    margin-top:100px;
    /* 圆角 */
    border-radius:15px;
}
.allfoods{
    list-style:none;		/* 去掉ul的默认样式 */
}
.allfoods li h3{
    color:white;
    font-size:16px;
    text-align:center;
    line-height:50px;
    background:rgba(45,154,152,0.8);
}
/* 第一个li */
.allfoods li:first-child h3{
    border-radius:15px 15px 0 0;
}
.allfoods li:last-child h3{
    border-radius:0 0 15px 15px;
}

.allfoods li h3:hover{
    background:rgba(45,154,152,0.9);
}
.fooddesc{
    width:100%;
    height:200px;
    position:relative;		/*相对布局*/
    background:rgba(45,154,152,0.4);
    padding:65px 0 25px 0;		/* 上  右   下   左 */
}
.normalprice{
    text-decoration:line-through;
}
.realprice{
    color:red;
}
.buybtn{
    position:absolute;
    left:60px;
    bottom:-40px;
    width:100px;
    line-height:30px;
    text-align:center;
    background:skyblue;
    border-radius:15px;
    font-size:14px;
}

.fooddesc img{
    width:200px;
    height:150px;
    position:absolute;
    left:30%;
    border-radius:15px;
    /*过渡        所有的过渡效果，在0.5秒钟之内，以平稳的速度完成*/
    transition:all 0.5s linear;
}


.foodprice{
    position:relative;
    text-align:left;
    line-height:30px;
    padding-left:60px;
    font-size:16px;
    color:white;
    transition:all 0.5s linear;
    opacity:0;
}

.fooddesc:hover img{
    left:50%;
}
.fooddesc:hover .foodprice{
    opacity:100;
}



.look{
    width:350px;
    height:65px;
    background:rgba(45,154,152,0.8);
    position:fixed;
    top:100px;
    right:0px;
    border-radius:15px;
    font-size:20px;
    color:white;
    text-align:center;
    padding-top:20px;
}

.shoppingcar{
    width:350px;
    height:50px;
    position:fixed;
    bottom:0px;
    right:0px;
}

.carbag{
    position:fixed;
    right:0px;
    bottom:-300px;
    width:350px;
    background:#fff;

    transition:all 0.8s linear;
}
.isHide{
    bottom: -300px;
}
.isShow{
    bottom: 0px;
}

.carbag p{
    font-size:16px;
    padding-left:20px;
    line-height:40px;
    border-bottom:1px solid #0089DC;
    border-top:1px solid #0089DC;
}
.carbag p span{
    color:#4E89E1;
    margin-left:10px;
    cursor:pointer;
}
.carbag table{
    display:block;
    width:100%;
    height:260px;
    text-align:center;
    color:#666;
    border:none;
}
#bagcontent tr{
    width:350px;
    height:40px;
    margin:5px 10px 10px 10px;
    border-bottom:1px solid #0089DC;
}
#bagcontent tr .bagfname{
    width:40%;
    height:40px;
    line-height:40px;
    padding-left:20px;
}
#bagcontent tr .bagnum{
    width:40%;
    height:40px;
    line-height:40px;
}
#bagcontent tr .bagnum button{
    width:40px;
    height:25px;
}
#bagcontent tr .bagnum span{
    margin:0px 10px;
}
#bagcontent tr .bagprice{
    width:20%;
    padding-right:20px;
}

.carprice{
    width:50%;
    height:100%;
    background:url(../image/car.png) no-repeat 15px center;
    background-color:black;
    color:white;
    font-size:30px;
    position:absolute;
    bottom:0;
    right:175px;
    text-align:center;
    line-height:50px;
    cursor:pointer;
}
.carinfo{
    width:50%;
    height:100%;
    background:white;
    text-align:center;
    line-height:50px;
    position:absolute;
    right:0;
    bottom:0;
}

.footer{
    width:70%;
    height:50px;
    text-align:center;
    color:white;
    font-size:14px;
    padding-top:10px;

}

.login{
    width:30%;
    position:fixed;
    top:20%;
    left:35%;
    border-radius:15px;
    text-align:center;
    background:rgba(0,0,0,0.8);
}
.login span{
    /* 右浮动，居右显示 */
    float:right;
    display:block;
    margin:10px;
    color:#fff;
    width:25px;
    height:25px;
    line-height:25px;
    border:1px #fff solid;
    border-radius:50%;		/* 50%的圆角，就是一个圆 */
}
.login span:hover{
    color:red;
    cursor:pointer;
}
.login form{
    margin-top:15px;
    margin-bottom:0px;
}
.login form tr{
    display:block;
    width:100%;
    color:#ccc;
    margin:20px 0 0 30px;
    border-bottom:1px solid #666;
}
.login .labname{
    width:80px;
}
.login form tr input{
    width:200px;
    height:30px;
    margin:12px;
    padding:5px;
    border:0;			/* 去掉边框和背景颜色 */
    background:none;
    color:#fff;
}
.login form tr #yzm{
    width:130px;
}
.login .btn{
    width:100%;
    color:#fff;
    font-size:30px;
    height:60px;
    line-height:60px;
    text-align:center;
    background:#3EA751;
    border:0;
    padding:0px;
    border-radius:0 0 15px 15px;
    cursor:pointer;
}
[v-cloak] {
    display: none;
}